{yun:}include file="$wapstyle/member/fheader.htm"{/yun}
<link rel="stylesheet" type="text/css" href="{yun:}$wap_style{/yun}/js/webapppic/cropper.css?v={yun:}$config.cachecode{/yun}" />
<script src="{yun:}$wap_style{/yun}/js/webapppic/cropper.js?v={yun:}$config.cachecode{/yun}" language="javascript"></script>

<script>
    $(function() {

        function toFixed2(num) {
            return parseFloat(+num.toFixed(2));
        }

        $('#cancleBtn').on('click', function() {
            $("#showEdit").fadeOut();
            $('#showResult').fadeIn();
        });
		$('#rotateBtn').on('click', function() {
            $('#readyimg').cropper('rotate',90);
        });

        $('#confirmBtn').on('click', function() {
            $("#showEdit").fadeOut();
			
            var $image = $('#report > img');
            var dataURL = $image.cropper("getCroppedCanvas");
            var imgurl = dataURL.toDataURL("image/jpeg", 0.5);
            $("#changeAvatar > img").attr("src", imgurl);
            $("#uimage").val(imgurl);
            $('#showResult').fadeIn();

        });

        function cutImg() {
			
            $('#showResult').fadeOut();
            $("#showEdit").fadeIn();
        }

        $('#image').on('change', function() {

		    
            cutImg();
        });

		/**头像裁剪*/
			var $image = $('#report > img'),
			options = {
			   modal: true,
			   autoCropArea: 0.5,
			   dragCrop: false,
			   movable: true,
			   resizable: false,
			   minContainerWidth: 400,
			   minContainerHeight: 400,
			  aspectRatio: 1 / 1,
			  crop: function (data) {
				
			  }
			};

			$image.on().cropper(options);

			 var $inputImage = $('#image'),
				URL = window.URL || window.webkitURL,
			 blobURL;
			  if (URL) {
				  $inputImage.change(function () {
					var files = this.files,
						file;

					if (files && files.length) {
					  file = files[0];

					  if (/^image\/\w+$/.test(file.type)) {
						blobURL = URL.createObjectURL(file);
						
						$image.one('built.cropper', function () {
						  URL.revokeObjectURL(blobURL); // Revoke when load complete
						}).cropper('reset', true).cropper('replace', blobURL);	

						
						$inputImage.val('');
					  } else {
						showMessage('请上传图片');
					  }
					}
				  });
				} else {
				  $inputImage.parent().remove();
				}

		/***头像裁剪end***/

    });
	
    function photo() {
        var uimage = $("#uimage").val();
        if(uimage == '') {
            layermsg('头像未改变，无需修改');
            return false;
        }else{
			var regS = new RegExp("\\+", "gi");
			uimage = uimage.replace(regS, "#");
			layer_load('执行中，请稍候...');
			$.ajax({
				type: 'POST',
				url: "index.php?c=photo",
				cache: false,
				dataType: 'json',
				data: {
					uimage: uimage,
					submit: 1
				},
				success: function(res) {
					layer.closeAll();
					if(res){
						layermsg(res.msg, 2, function() {
							window.location.href = wapurl + "member/index.php";
						});
						return false;
					}
				}
			});
		}
    }
</script>

<section class="resume_mangage">
    <div class="clear"></div>
    <div class="verify">
        <div class="photo_i_box_v">
            <div class="photo_i_box_v_c">
                <div id="showResult">
                    <div id="changeAvatar" class="photo_i_box">
                        <img src="{yun:}$rows.photo_n{/yun}" width="120" height="120">
                    </div>
                    <div class="clear"></div>
                    <div class="photo_xz">
                        <input id="image" type="file" accept="image/*" />选择上传头像
                    </div>
                    <div class="yunset_identity_msg"><i class="yunset_identity_msg_icon"></i>选择上传头像点击提交按钮即可上传</div>
                </div>
                <div id="showEdit" style="display: none;width:100%;height: 100%;position: absolute;top:0;left: 0;z-index: 9;">
                    <div class="photo_cz_bth">
                        <button class="mui-btn" data-mui-style="fab" id='cancleBtn'>取消</button>
						<button class="mui-btn" data-mui-style="fab" id='rotateBtn'>旋转</button>
                        <div class="photo_cz_bth_qd">
                        	<button class="mui-btn" data-mui-style="fab" data-mui-color="primary" id='confirmBtn'>确定</button> 
                       	</div>
                    </div>
                    <div id="report">
						<img src="" alt="Picture" id="readyimg">
					</div>
                </div>
            </div>
            <div class="photo_tj">
                <input type='hidden' name="txt" id="uimage" value="">
                <input name="submit" type="button" onclick="photo()" value="提交" class="yunset_bth" />
            </div>
        </div>
    </div>
</section>
<div class="clear"></div>
{yun:}include file="$wapstyle/footer.htm"{/yun}